<template>
  <kk-relative class="Page W">
    <kk-text class="T1" val="Center 容器" />
    <div class="F2" />
    <kk-text class="T2" val="居中容器，支持垂直居中、水平居中和中心居中" />
    <div class="F2" />
    <div class="Shows">
      <div class="Polk">
        <kk-center class="CenterBox" ins="50" h>
          <div class="CenterBoxIn HW" />
        </kk-center>
        <kk-center class="CenterBox" ins="50" w>
          <div class="CenterBoxIn HW" />
        </kk-center>
        <kk-center class="CenterBox" ins="50">
          <div class="CenterBoxIn HW" />
        </kk-center>
      </div>
      <div class="Codea">
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-center" />
        <kk-text class="Blue Space" val="ins" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="50" />
        <kk-text class="Blue Space" val="h" />
        <kk-text class="Black" val="&gt;&lt;/" />
        <kk-text class="Blues" val="kk-center" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-center" />
        <kk-text class="Blue Space" val="ins" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="50" />
        <kk-text class="Blue Space" val="w" />
        <kk-text class="Black" val="&gt;&lt;/" />
        <kk-text class="Blues" val="kk-center" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-center" />
        <kk-text class="Blue Space" val="ins" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="50" />
        <kk-text class="Black" val="&gt;&lt;/" />
        <kk-text class="Blues" val="kk-center" />
        <kk-text class="Black" val="&gt;" />
      </div>
    </div>

    <div class="F1" />

    <kk-text class="T1" val="内部容器" />
    <div class="F2" />
    <kk-text class="T2" val="内部容器大小由 ins 参数控制，使用百分比单位，由子元素撑开时不要使用此参数" />

    <div class="F1" />

    <kk-text class="T1" val="可覆盖样式" />
    <div class="F2" />
    <kk-text class="T2" val="组件默认的样式" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Blues" val="display:" />
        <kk-text class="Orange Space" val="inline-block" />
      </div>
    </div>

    <div class="F1" />

    <kk-text class="T1" val="行内样式" />
    <div class="F2" />
    <kk-text class="T2" val="组件自带一部分行内样式，请注意样式冲突" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Blues" val="box-sizing:" />
        <kk-text class="Orange Space" val="border-box" />
        <div class="F2" />
        <kk-text class="Blues" val="position:" />
        <kk-text class="Orange Space" val="relative" />
        <div class="F2" />
        <kk-text class="Blues" val="overflow:" />
        <kk-text class="Orange Space" val="visible" />
      </div>
    </div>
  </kk-relative>
</template>

<style scoped>
.CenterBox {
  border: 0.05vw solid rgb(220, 223, 230);
  margin-right: 0.7vw;
  height: 4vw;
  width: 4vw;
}

.CenterBoxIn {
  background-color: rgb(217, 236, 255);
}
</style>